<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				left: 0;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 0;
				top: 200px;
			}
		</style>
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				// 获取box1
				var box1 = document.getElementById("box1");
				// 获取btn01
				var btn01 = document.getElementById("btn01");
				// 获取btn02
				var btn02 = document.getElementById("btn02");
				// 定义一个变量,用来保存定时器的标识
				var timer;
				// 点击按钮以后,使box1向右移动(left值增大)
				btn01.onclick = function(){				
					move(box1,"left",800,20);					
				};
				
				// 点击按钮以后,使box1向左移动(left值减小)
				btn02.onclick = function(){					
					move(box1,"left",0,-10);				
				};
				
				// 获取btn03
				var btn03 = document.getElementById("btn03");
				btn03.onclick = function(){
					move(box2,"left",800,10);
				};
				
				// 测试按钮
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					// move(box2,"width",800,10);
					// move(box2,"top",800,10);
					// move(box2,"height",800,10);
					move(box2,"width",800,10,function(){
						move(box2,"height",400,10,function(){
							move(box2,"top",0,10,function(){
								move(box2,"width",100,10,function(){
									
								});
							});
						});
					});
				};
			};
			
			// 定义一个变量,用来保存定时器的标识
			// 目前我们的定时器的标识由全局变量timer保存,所有的执行正在执行的定时器都在这个变量中保存
			// var timer;
			
			
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>
		<button id="btn02">点击按钮以后box2向左移动</button>
		<button id="btn03">点击按钮以后box2向右移动</button>
		<button id="btn04">测试按钮</button>
		<br/><br/>
		<div id="box1"></div>
		<div id="box2"></div>
		<div style="width: 0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;"></div>
	</body>
</html>
